<template>
    <el-container class="main_container">
        <!--头部布局-->
        <el-header>
            <!--logo和项目名称-->
            <div class="left_box">
                <img src="../assets/img/timg.gif">
                <span>员工资管理系统</span>
            </div>
            <!--用户登录展示的头像-->
            <div class="right_box">
                <el-dropdown>
                    <img src="../assets/img/timg.gif">
                    <!--下拉菜单-->
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item icon="el-icon-house"><span @click="logout()">系统首页</span></el-dropdown-item>
                        <el-dropdown-item icon="el-icon-ship"><span @click="logout()">交流讨论</span></el-dropdown-item>
                        <el-dropdown-item icon="el-icon-switch-button"><span @click="logout()">退出登录</span>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </el-header>
        <el-container>

            <el-aside :width="isCollapse?'64px':'200px'">
                <!--展开/收起-->
                <div class="toggle_box" @click="toggleCollapse">|||</div>
                <el-menu
                        class="el-menu-vertical-demo"
                        @open="handleOpen"
                        @close="handleClose"
                        background-color="#001529"
                        text-color="#fff"
                        active-text-color="#ffd04b"
                        :collapse="isCollapse"
                        :default-active="activePath"
                        :collapse-transition="false"
                        :unique-opened="true"
                        :router="true">
                    <MenuTree :menuList="this.MenuList"></MenuTree>
                </el-menu>
            </el-aside>
            <el-main>
                <!--路由视图-->
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
    import MenuTree from '../components/MenuTree'

    export default {
        name: 'Main',
        data() {
            return {
                isCollapse: false,
                activePath: '',
                MenuList: [],
                MenuManage: [
                    {
                        "id": 1,
                        "parentId": 0,
                        "menuName": "系统管理",
                        "url": "",
                        "icon": "el-icon-setting",
                        "orderNum": 1,
                        "open": 1,
                        "disabled": false,
                        "perms": null,
                        "type": 0,
                        "children": [
                            {
                                "id": 226,
                                "parentId": 0,
                                "menuName": "用户管理",
                                "url": "/users",
                                "icon": "el-icon-user",
                                "orderNum": 2,
                                "open": 0,
                                "disabled": false,
                                "perms": "users",
                                "type": 0,
                                "children": []
                            },
                            {
                                "id": 235,
                                "parentId": 0,
                                "menuName": "角色管理",
                                "url": "/roles",
                                "icon": "el-icon-postcard",
                                "orderNum": 3,
                                "open": 0,
                                "disabled": false,
                                "perms": "",
                                "type": 0,
                                "children": []
                            },

                            {
                                "id": 319,
                                "parentId": 0,
                                "menuName": "公告管理",
                                "url": "/notices",
                                "icon": "el-icon-s-flag",
                                "orderNum": 4,
                                "open": 0,
                                "disabled": true,
                                "perms": "",
                                "type": 0,
                                "children": []
                            }
                        ]
                    },
                    {
                        "id": 295,
                        "parentId": 1,
                        "menuName": "员工管理",
                        "url": "",
                        "icon": "el-icon-s-marketing",
                        "orderNum": 5,
                        "open": 0,
                        "disabled": false,
                        "perms": "",
                        "type": 0,
                        "children": [
                            {
                                "id": 216,
                                "parentId": 1,
                                "menuName": "员工管理",
                                "url": "/employees",
                                "icon": "el-icon-user",
                                "orderNum": 2,
                                "open": 0,
                                "disabled": false,
                                "perms": "employees",
                                "type": 0,
                                "children": []
                            },
                            {
                                "id": 4,
                                "parentId": 1,
                                "menuName": "薪资管理",
                                "url": "/salary",
                                "icon": "el-icon-help",
                                "orderNum": 3,
                                "open": 0,
                                "disabled": false,
                                "perms": null,
                                "type": 0,
                                "children": []
                            }, {
                                "id": 261,
                                "parentId": 1,
                                "menuName": "部门管理",
                                "url": "/departments",
                                "icon": "el-icon-s-home",
                                "orderNum": 3,
                                "open": 0,
                                "disabled": false,
                                "perms": "",
                                "type": 0,
                                "children": []
                            },
                            {
                                "id": 255,
                                "parentId": 1,
                                "menuName": "心情便签",
                                "url": "/mood",
                                "icon": "el-icon-s-home",
                                "orderNum": 5,
                                "open": 0,
                                "disabled": false,
                                "perms": "",
                                "type": 0,
                                "children": []
                            },
                            {
                                "id": 245,
                                "parentId": 1,
                                "menuName": "辞职",
                                "url": "/quit",
                                "icon": "el-icon-s-home",
                                "orderNum": 5,
                                "open": 0,
                                "disabled": false,
                                "perms": "",
                                "type": 0,
                                "children": []
                            },
                            {
                                "id": 285,
                                "parentId": 1,
                                "menuName": "请假",
                                "url": "/leave",
                                "icon": "el-icon-s-home",
                                "orderNum": 5,
                                "open": 0,
                                "disabled": false,
                                "perms": "",
                                "type": 0,
                                "children": []
                            },
                        ]
                    },
                    {
                        "id": 5,
                        "parentId": 2,
                        "menuName": "日志管理",
                        "url": "/logs",
                        "icon": "el-icon-camera",
                        "orderNum": 6,
                        "open": 0,
                        "disabled": false,
                        "perms": null,
                        "type": 0,
                        "children": [
                            {
                                "id": 271,
                                "parentId": 2,
                                "menuName": "登入日志",
                                "url": "/loginLog",
                                "icon": "el-icon-date",
                                "orderNum": 1,
                                "open": 0,
                                "disabled": false,
                                "perms": "login:log",
                                "type": 0,
                                "children": []
                            },
                            {
                                "id": 307,
                                "parentId": 2,
                                "menuName": "操作日志",
                                "url": "/logs",
                                "icon": "el-icon-edit",
                                "orderNum": 1,
                                "open": 1,
                                "disabled": false,
                                "perms": "",
                                "type": 0,
                                "children": []
                            }
                        ]
                    }
                ]
            }
        },
        components: {
            MenuTree
        }, created() {
            //创建组件的时候调用查询所有用户的方法
            this.menuManage()
        },
        methods: {
            toggleCollapse() {
                this.isCollapse = !this.isCollapse
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath)
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath)
            },
            logout() {
                window.location.href = "http://localhost:8081/hello";
                this.$axios.post('/sys/logout').then((response) => {
                })
            }
            ,
            menuManage() {
                this.$axios.get('/sys/getuserByRole').then((response) => {
                    var auth = 0;
                    for (var i = 0; i < response.data.length; i++) {
                        if (response.data[i].authority == "ROLE_ADMIN") {
                            auth = auth + 3;
                        } else if (response.data[i].authority == 'ROLE_USER') {
                            auth = auth + 2;
                        } else {
                            auth = auth;
                        }
                    }
                    if (auth >= 3) {
                        this.MenuList.push(this.MenuManage[0])
                        this.MenuList.push(this.MenuManage[1])
                        this.MenuList.push(this.MenuManage[2])
                    } else if (auth == 2) {
                        this.MenuList.push(this.MenuManage[1])
                    }

                })
            }
        }
    }
</script>

<style scoped>
    /*设置整个容器的高度*/
    .main_container {
        height: 100%;
    }

    /*头部布局*/
    .el-header {
        background-color: #001529;
        display: flex;
        justify-content: space-between;
        padding-left: 0;
        color: #FFFFFF;
        align-items: center;
        font-size: 20px;
    }

    /*左边logo和标题*/

    .left_box {
        display: flex;
        align-items: center;
    }

    /*logo*/

    img {
        width: 60px;
        height: 60px;
        margin: 0px 0px 10px 15px;
    }

    /*标题*/

    span {
        margin-left: 15px;
    }


    /*右边的登录头像*/

    .right_box {

    }

    .el-dropdown > img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: #FFFFFF;
        margin: 0px 15px 0px 0px;
        background-size: contain;
    }

    /*侧边栏*/
    .el-aside {
        background-color: #001529;
    }

    .el-menu {
        border-right: none;
    }

    /*展开/收起*/

    .toggle_box {
        background-color: chartreuse;
        font-size: 15px;
        font-weight: bold;
        line-height: 24px;
        color: #FFFFFF;
        letter-spacing: 0.2em;
        text-align: center;
        cursor: pointer;

    }


    /*内容主体*/
    .el-main {
        background-color: #E9EEF3;
    }

    /*下拉菜单的样式*/
    .el-dropdown-link {
        cursor: pointer;
        color: #409EFF;
    }
</style>
